
import React, { JSXElementConstructor, ReactElement, SyntheticEvent } from "react"
import { $StopPropagation } from "../../common/utils"
import modalLeftTopImage from "../../assets/image/side_line_up@2x.png"
import modalRightTopImage from "../../assets/image/side_line_up@2x (1).png"
import modalRightBottomImage from "../../assets/image/side_line_down@2x (1).png"
import modalLeftBottomImage from "../../assets/image/side_line_down@2x.png"
import lessModule from "./index.module.less"

// 主页-弹窗组件
interface homePageModalComponentPropsInterface {
    isPrepareCloseModal: boolean
    get_isModalClose: Function
    ModalContentComponents: ReactElement
}
const HomePage_ModalComponent: React.FC<homePageModalComponentPropsInterface> = (props) => {

    const click_mask = () => {
        props.get_isModalClose(false)
    }
    const click_content = (e: SyntheticEvent) => {
        $StopPropagation(e)
    }

    return (
        <div className={`${lessModule["homePageModalComponent"]}`} onClick={() => click_mask()}>
            <div className={`${lessModule["homePageModalComponent-content"]} ${lessModule["homePageModalComponent-contentOpen"]} ${props.isPrepareCloseModal && lessModule["homePageModalComponent-contentClose"]}`} onClick={(e) => click_content(e)}>
                <img className={`${lessModule["homePageModalComponent-content__image"]} ${lessModule["homePageModalComponent-content__imageTopLeft"]}`} src={modalLeftTopImage} />
                <img className={`${lessModule["homePageModalComponent-content__image"]} ${lessModule["homePageModalComponent-content__imageRightTop"]}`} src={modalRightTopImage} />
                <img className={`${lessModule["homePageModalComponent-content__image"]} ${lessModule["homePageModalComponent-content__imageRightBottom"]}`} src={modalRightBottomImage} />
                <img className={`${lessModule["homePageModalComponent-content__image"]} ${lessModule["homePageModalComponent-content__imageLeftBottom"]}`} src={modalLeftBottomImage} />
                <>
                    {props.ModalContentComponents}
                </>
            </div>
        </div>
    )
}

export default HomePage_ModalComponent